<template>
  <view class="container">
    <!-- 当前设备数是0 -->
    <view class="device_empty" v-if="deviceList.length === 0">
      <view>
        <view class="custom_title"> 添加设备 </view>

        <view class="common_desc" style="margin-top: 30.72rpx">
          请扫描设备或包装上的二维码来添加设备
        </view>
      </view>

      <img src="/static/home/saomiao.png" class="device_empty_image" alt="" />
      <view class="saomiao_code" @click="goToScanCode"> 扫描设备二维码 </view>
      <view class="saomiao_code2" @click="addDevice"> 手动添加 </view>
    </view>

    <view class="device_list" v-else>
      <!-- <u-tabs @click="click" :list="deviceTabs"></u-tabs> -->

      <view class="device_list_content" v-if="[0, 2].includes(activekey)">
        <view
          class="device_info_card"
          v-for="item in deviceList"
          :key="item.id"
          @click="goToDeviceInfo(item)"
        >
          <image src="@/static/home/demo.png" class="device_info_card_image" />

          <view class="device_info_card_content">
            <view class="title">
              {{ item.name }}
            </view>

            <view class="device_id"> 设备编号： {{ item.imei }} </view>

            <view class="device_status"> 设备状态：在线 </view>

            <view class="device_box">
              <view
                class="device_actions"
                style="display: flex; align-items: center"
              >
                <image src="@/static/home/shebei.png" alt="" />
                <text>查看</text>
              </view>

              <image class="shebei_btn" src="@/static/home/de_btn.png" alt="" />
            </view>
          </view>
        </view>
      </view>

      <view>
        <view
          class="device_list_content"
          @click="toAdddevice"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            background: white;
          "
        >
          + 添加设备
        </view>
      </view>
    </view>

    <u-action-sheet
      :safeAreaInsetBottom="true"
      @close="show = false"
      :actions="list"
      :title="title"
      :show="show"
      @select="select"
    ></u-action-sheet>

    <u-modal
      @confirm="confirm"
      :showCancelButton="true"
      @close="numberShow = false"
      :show="numberShow"
      @cancel="numberShow = false"
      :title="`手动添加设备`"
    >
      <input type="number" placeholder="请输入设备编号" v-model="number" />
    </u-modal>
  </view>
</template>

<script>
import customTabbar from "@/components/custom-tabbar/index.vue";
import storage from "@/utils/storage";
import { bindDevice, queryBindDevice } from "../../api";
export default {
  components: {
    customTabbar,
  },
  computed: {},
  data() {
    return {
      // 页面参数
      options: {},
      // 是否已登录
      isLogin: false,
      // 当前已添加的设备列表
      deviceList: [],
      // 加载与刷新标记
      loading: false,
      hasLoaded: false,
      lastFetchAt: 0,
      // 设备类型
      deviceTabs: [
        {
          name: "全部",
          key: 0,
        },
        {
          name: "开关类",
          key: 1,
        },
        {
          name: "温控类",
          key: 2,
        },
        {
          name: "液位类",
          key: 3,
        },
        {
          name: "安防类",
          key: 4,
        },
        {
          name: "电表类",
          key: 5,
        },
        {
          name: "工控类",
          key: 6,
        },
      ],
      activekey: 0,
      title: "添加方式",
      list: [
        {
          name: "扫码添加",
        },
        {
          name: "手动添加",
        },
      ],
      show: false,
      numberShow: false,
      number: "",
    };
  },

  onLoad(options) {
    console.log("optionsoptions", options);
  },
  // 挂载
  mounted() {
    // 获取设备列表
    this.getDeviceList();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},
  watch: {},

  methods: {
    async confirm() {
      try {
        await bindDevice({
          imei: this.number,
        });

        uni.showToast({
          title: "绑定成功",
          icon: "success",
          mask: true,
        });

        this.number = "";
        this.getDeviceList();
        this.numberShow = false;
      } catch (error) {
        uni.showToast({
          title: error.message,
          icon: "error",
          mask: true,
        });
      }
    },
    select(item) {
      console.log("item", item);
      if (item.name === "扫码添加") {
        this.goToScanCode();
      } else {
        this.addDevice();
      }
    },
    async getDeviceList() {
      this.loading = true;
      try {
        const _Res = await queryBindDevice();
        console.log("_Res", _Res);
        this.deviceList = Array.isArray(_Res?.list) ? _Res.list : [];
        this.hasLoaded = true;
        this.lastFetchAt = Date.now();
      } catch (error) {
        // 可按需提示错误
      } finally {
        this.loading = false;
      }
    },
    // 父页面切到首页时调用，用于刷新数据（简单节流：1分钟内不重复拉取）
    onTabShow() {
      this.getDeviceList();
    },
    click(item) {
      console.log("item", item);
      this.activekey = item.key;
    },

    goToDeviceInfo({ id, name }) {
      // 如果name包含HQ-YW
      if (name.includes("HQ-YW")) {
        // 跳到pages/index/liquidDevice/index
        uni.navigateTo({
          url: `/pages/index/liquidDashboard/index?id=${id}`,
        });

        return;
      }

      // 如果包含4g
      if (name.includes("4G")) {
        // 跳到pages/index/4GDevice/index
        uni.navigateTo({
          url: `/pages/index/smartSwitch/index?id=${id}`,
        });

        return;
      }

      uni.navigateTo({
        url: `/pages/index/deviceInfo/index?id=${id}`,
      });
    },
    toAdddevice() {
      uni.navigateTo({
        url: `/pages/home/addDevice`,
      });
    },
    goToScanCode() {
      // 如果用户没有登录
      if (!storage.get("token")) {
        uni.showModal({
          title: "提示",
          content: "请先登录",
          showCancel: true,
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.navigateTo({
                url: "/pages/login/index",
              });
            }
          },
        });
        return;
      }

      uni.scanCode({
        onlyFromCamera: true,
        success: async function (res) {
          console.log("条码内容：" + res.result);

          try {
            await bindDevice({
              imei: res.result,
            });

            uni.showToast({
              title: "绑定成功",
              icon: "success",
              mask: true,
            });
          } catch (error) {
            uni.showToast({
              title: error.message,
              icon: "error",
              mask: true,
            });
          }
        },
      });
    },
    // 手动添加
    addDevice() {
      // uni.navigateTo({
      //   url: "/pages/category/initDevice/index",
      // });
      this.numberShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}

.container {
  height: 100%;
  background: #f6f7fb;
}

.device_empty {
  padding: 0 61.36rpx 61.36rpx 61.36rpx;
}

.device_list {
  padding: 0 30.36rpx 61.36rpx 30.36rpx;
}

.device_empty_image {
  width: 247.159rpx;
  height: 366.477rpx;

  margin-left: 192.614rpx;
  margin-top: 97.159rpx;
}

.saomiao_code {
  margin-top: 83.523rpx;
  margin-left: 177.273rpx;
  background: rgba(96, 164, 247, 1);
  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 400;
  line-height: 33.75rpx;
  width: 276.136rpx;
  height: 76.705rpx;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 38.352rpx;
}

.saomiao_code2 {
  margin-top: 20rpx;
  margin-left: 177.273rpx;
  background: #ff5a2a;
  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 400;
  line-height: 33.75rpx;
  width: 276.136rpx;
  height: 76.705rpx;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 38.352rpx;
}

.device_list_content {
  margin-top: 28.977rpx;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  gap: 15.045rpx;
}

.device_info_card {
  // width: 332.386rpx;
  height: 201.136rpx;
  background: rgba(255, 255, 255, 1);

  padding: 11.932rpx 22.159rpx 22.159rpx 15.341rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .device_info_card_image {
    width: 160rpx;
    height: 200rpx;
  }

  .device_info_card_content {
    margin-left: 25.568rpx;
    flex: 1;

    title {
      font-family: "Microsoft YaHei";
      font-size: 25.568rpx;
      font-weight: 400;
      line-height: 33.75rpx;
      text-align: left;
    }

    .device_id {
      font-family: "Microsoft YaHei";
      font-size: 24rpx;
      font-weight: 400;
      // line-height: 20.25rpx;
      margin-top: 16.875rpx;
      color: rgba(159, 159, 159, 1);

      // width: 178.977rpx;
      // width: 192.614rpx;
    }

    .device_status {
      font-family: "Microsoft YaHei";
      font-size: 24rpx;
      font-weight: 400;
      // line-height: 20.25rpx;
      margin-top: 6.818rpx;
      color: rgba(159, 159, 159, 1);
    }

    .device_box {
      margin-top: 11.932rpx;
      display: flex;
      // justify-content: space-between;
      justify-content: end;
      align-items: center;
    }

    .device_actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(186, 186, 186, 1);
      padding: 12rpx 12rpx;
      margin-right: 12rpx;

      // width: 76.705rpx;
      // height: 28.977rpx;
      border-radius: 14.485rpx;
      display: flex;
      justify-content: center;
      // font-size: 32rpx;

      image:nth-child(1) {
        width: 34.045rpx;
        height: 34.045rpx;
      }

      text {
        font-family: "Microsoft YaHei";
        // font-size: 17.045rpx;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 22.5rpx;

        color: rgba(255, 255, 255, 1);
        margin-left: 3.409rpx;
      }
    }
  }
}

.shebei_btn {
  width: 56.25rpx;
  height: 56.25rpx;
}
</style>
